<template>
  <div class="returnsDetail">
    <div class="headerBox">
      <van-nav-bar
        title="收益明细"
        left-arrow
        @click-left="goBack"
      ></van-nav-bar>
    </div>
    <div class="inforHeader">
      <van-dropdown-menu>
        <van-dropdown-item v-model="selectVal" :options="option" />
      </van-dropdown-menu>
    </div>
    <div class="dataBox">
      <div class="subData" v-for="(item,index) in dataList" :key="index" :class="item.show?'arrowOpen':''"  @click="arrowOpen(index)">
        <div class="subItem">
          <p class="flex" style="margin-bottom:0.05rem">
            <span class="txt1">奖励发放</span>
            <span class="txt2">￥1700.00</span>
          </p>
          <div v-if="item.state==2">
            <p class="flex">
              <span class="txt4">实际转出</span>
              <span class="txt4">￥1640.00</span>
            </p>
            <p class="flex">
              <span class="txt4">手续费</span>
              <span class="txt4">￥60.00</span>
            </p>
          </div>
        </div>
        <p class="flex">
          <span class="txt3">2020-02-30 12:32:54</span>
          <span v-if="item.state==2"><img src="@/assets/img/wallet/icon_xiangxiaxiao@2x.png" alt="" class="arrow"></span>
        </p>
      </div>
      <div class="noWallet" v-if="dataList.length==0">
        <img src="@/assets/img/wallet/img_dianpu@2x.png" alt="">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      selectVal:0,
      option: [
        { text: '全部', value: 0 },
        { text: '奖励发放', value: 1 },
        { text: '转出FIL', value: 2 },
        { text: '转入FIL', value: 3 },
      ],
      dataList:[]
    }
  },
  created(){
    // this.dataList=[{state:1},{state:2,show:true},{state:1},{state:3},{state:2,show:false}]
    this.dataList=[]
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    submit(){
      this.popupShow=false
    },
    async getUserWalletList(){
        let res = await this.$http.selectUserWalletList({page:1,pageSize:200});
        if (res) {
          this.dataList =res.data.map(x=>{
            if(x.type==3){
              x.show=false
            }
            return x
          })
        }
    },
    arrowOpen(index){
      if(!this.dataList[index].show){
        this.dataList[index].show=true
      }else {
        this.dataList[index].show=false
      }
      
    }
  }
};
</script>
<style>
.returnsDetail .van-dropdown-menu__item {
  justify-content: flex-start;
}
.returnsDetail .van-dropdown-menu__title{
  padding-left: 0.28rem;
  color: #fff;
}
.returnsDetail .van-dropdown-menu__bar{
  background-color: #00C8E7;
}
.returnsDetail .van-dropdown-menu__title::after{
  border-color: transparent transparent #fff #fff;
  opacity: 1;
}
</style>
<style scoped>
.returnsDetail{
  background: #fff;
  min-height: 100vh;
}
.inforHeader{
  height: 0.8rem;
  background: #00C8E7;
}
.txt1{
  font-size: 0.29rem;
  font-weight: bold;
}
.txt2{
  font-size: 0.32rem;
  font-weight: bold;
}
.txt3{
  font-size: 0.24rem;
  color: #999999;
  margin-top: 0.05rem;
}
.txt4{
  font-size: 0.24rem;
  margin-bottom: 0.05rem;
}
.dataBox{
  margin: 0 0.28rem;
  margin-top: 0.1rem;
}
.subData{
  padding: 0.2rem 0;
  border-bottom: 1px solid #E5E5E5;
}
.subItem{
  height: 0.5rem;
  overflow: hidden;
  transition: all .3s;
}
.arrowOpen .subItem{
  height: 1.2rem;
  transition: all .3s;
}
.arrow{
  width: 0.32rem;
  height: 0.32rem;
}
.arrowOpen .arrow{
  transform: rotate(180deg);
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 1.3rem;
}
</style>
